<!DOCTYPE html>
<html lang="zh-cn">

<head>

  <meta content="text/html;charset=utf-8" http-equiv="content-type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

  <title>滑雪族 - 结算信息</title>


  <!-- Bootstrap Core CSS -->
<!-- MetisMenu CSS -->
<!-- Custom CSS -->
<!-- Custom Fonts -->
  <!-- Custom Fonts -->
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->  <!--webuploader 引入CSS-->
    <link rel="stylesheet" href="/server/r/bower_components/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/server/r/bower_components/metisMenu/dist/metisMenu.min.css" />
    <link rel="stylesheet" href="/server/r/static/css/sb-admin-2_e507c2b.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/font-awesome/css/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet" href="/server/r/static/css/hxz/common_2baa698.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/alertify/themes/alertify.core.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/alertify/themes/alertify.bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="/server/r/vendor/umeditor/themes/default/css/umeditor.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/fex-webuploader/dist/webuploader.css" />
    <link rel="stylesheet" href="/server/r/bower_components/bootstrap-daterangepicker/daterangepicker.css" />
</head>

<body>

<div id="wrapper">

  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

    <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="activity-list">滑雪族 管理</a>
</div>
<!-- /.navbar-header -->

<ul class="nav navbar-top-links navbar-right">
  <!-- /.dropdown -->
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
    </a>
    <ul class="dropdown-menu dropdown-user">
      <li><a href="/manage/logout"><i class="fa fa-sign-out fa-fw"></i> 退出系统</a>
      </li>
    </ul>
    <!-- /.dropdown-user -->
  </li>
  <!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->

    <div class="navbar-default sidebar" role="navigation">
      <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">
  <li>
    <a href="#"><i class="fa fa-asterisk fa-fw"></i> 产品管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/activity-list"> 产品查询</a>
      </li>
      <li>
        <a href="/manage/manage-organizer-render-activity"> 产品显示控制</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="/#"><i class="fa fa-male fa-fw"></i> 报名管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/player-list"> 报名查询</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-list-alt fa-fw"></i> 订单管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/order-list"> 订单查询</a>
      </li>
      <li>
        <a href="/manage/refund-list"> 退款管理</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-check-circle fa-fw"></i> 主办方认证<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/organizer-edit"> 创建主办方</a>
      </li>
      <li>
        <a href="/manage/organizer-list"> 主办方列表</a>
      </li>
      <li>
        <a href="/manage/organizer-print"> 冬令营打印设置</a>
      </li>

    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-picture-o fa-fw"></i> 雪场管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/ski-field-edit"> 创建雪场</a>
      </li>
      <li>
        <a href="/manage/ski-field-list"> 雪场列表</a>
      </li>

    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-users fa-fw"></i> 教练管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/coach-list"> 预约情况</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-credit-card fa-fw"></i> 结算管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/manage-transfer-list"> 转账管理</a>
      </li>
      <li>
        <a href="/manage/manage-withdrawals-apply-list"> 提现申请</a>
      </li>
      <li>
        <a href="/manage/manage-withdrawals-record-list"> 结算列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-rmb fa-fw"></i> 财务管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/stream-list"> 交易流水</a>
      </li>
      <li>
        <a href="/manage/manage-bill-record-list"> 对账列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-dollar fa-fw"></i> 营销管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/marketing-list"> 返利管理</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-comments fa-fw"></i> 评价管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/comment-list">评价管理</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-tasks fa-fw"></i> 定时处理管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/quartz-list"> 定时处理列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-wechat fa-fw"></i> 微信页面管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/typography-list"> 微信首页管理</a>
      </li>
      <li>
        <a href="/manage/activity-weight-manage"> 活动置顶</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
</ul>
      </div>
      <!-- /.sidebar-collapse -->
    </div>
    <!-- /.navbar-static-side -->
  </nav>

  <div id="page-wrapper">
    <div class="row">
      <div class="col-lg-12">
        <h3 class="page-header">结算信息</h3>
      </div>
      <!-- /.col-lg-12 -->
    </div>

    <!-- /.row -->
    <div class="row">
      <div class="col-lg-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            结算信息 (不需要打款的活动只需要填写公司支付金额及结算备注信息，用于说明结算情况)
          </div>
          <div class="panel-body">
            <input id="applyId" type="hidden" value="${apply.applyId!''}"/>
            <input id="settlementMoney" type="hidden" value="${apply.withdrawalsAccount!''}">

            <!-- /.col-lg-12 -->
            <div class="col-lg-12">
              <div class="table-responsive">
                <table class="table table-bordered table-striped">
                  <thead>
                  <tr class="warning">
                    <th colspan="5">提现详情</th>
                  </tr>
                  <tr>
                    <th>序号</th>
                    <th>申请提现金额</th>
                    <th>场次ID</th>
                    <th>场次名称</th>
                    <th>场次状态</th>
                  </tr>
                  </thead>
                  <tbody id="applyDetail-list-body"></tbody>
                </table>
              </div>
            </div>

            <div class="col-lg-12">
              <div class="table-responsive">
                <table class="table table-bordered table-striped">
                  <thead></thead>
                  <tbody>
                  <tr>
                    <th>主办方名称</th>
                    <td>${apply.organizer.name!''}</td>
                    <th>联系电话</th>
                    <td>${apply.organizer.phone!''}</td>
                  </tr>
                  <tr>
                    <th>支付金额</th>
                    <td>
                      <input type="text" id="payMoney" placeholder="0.00">元 <span style="color: red">*(格式如12.00元 需要精确到小数点后2位)</span>
                    </td>
                    <th>结算金额</th>
                    <td> ${apply.withdrawalsAccount!''}元</td>
                  </tr>
                  <tr>
                    <th>利润:</th>
                    <td colspan="4">
                      <input type="text" id="profitMoney">元 <span style="color: red">*(格式如12.00元 需要精确到小数点后2位，不填写默认为结算金额-支付金额。)</span>
                    </td>
                  </tr>
                  <tr>
                    <th>转账时间:</th>
                    <td colspan="4">
                      <div class="input-group" id="start-date">
                        <span class="input-group-addon">
                          <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                        </span>
                        <input type="text" class="form-control input-sm" readonly placeholder="请输入转账时间" style="width: 150px;">
                        <span style="color: red">*（请选择具体的转账时间，公司对公账户打钱的时间。）</span>
                        <input type="hidden" id="start-time" name="startTime">
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>结算账号开户行</th>
                    <td colspan="4"><input class="form-control" id="organizerBank" value="${apply.organizer.organizerBank!''}"></td>
                  </tr>
                  <tr>
                    <th>结算账号开户名</th>
                    <td colspan="4"><input class="form-control" id="organizerAccountName" value="${apply.organizer.organizerAccountName!''}"></td>
                  </tr>
                  <tr>
                    <th>结算账号</th>
                    <td colspan="4"><input class="form-control" id="organizerAccount" value="${apply.organizer.organizerAccount!''}"></td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="col-lg-12">
              <div class="table-responsive">
                <table class="table table-bordered table-striped">
                  <thead></thead>
                  <tbody>
                  <tr>
                    <th>结算备注</th>
                  </tr>
                  <tr>
                    <td>
                      <div class="col-lg-8">
                        <input class="form-control" id="note">
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>银行电子回单凭证号<span style="color: red">*</span></th>
                  </tr>
                  <tr>
                    <td>
                      <div class="col-lg-6">
                        <input class="form-control" id="certificateId">
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>银行电子回单图片<span style="color: red">*</span>

                      <div class="pull-right">
                        <div id="cropper">上传图片</div>
                      </div>
                    </th>
                  </tr>
                  <tr>
                    <td>
                      <!--上传图片-->
                      <div id="settlementImage">
                        <input id="image-url" type="hidden"/>
                        <img id="preview-image">
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      <div class="pull-right">
                        <button class="btn btn-primary" id="settlement">结算</button>
                        <a href="/manage/manage-withdrawals-apply-list" class="btn btn-info">返回</a>
                      </div>
                    </th>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->


  </div>
  <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->
<script id="tpl-apply-detail-list-item" type="text/template">
  <tr>
    <td>{{applyDetailId}}</td>
    <td>{{withdrawalsAccount}}元</td>
    <td>{{episodeId}}</td>
    <td>{{episode.name}}</td>
    <td>{{episodeStatus(episode.status)}}</td>
  </tr>
</script>
<div id="hxz-background" class="background" style="display: none; "></div>
<div id="hxz-progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div>

<script src="/server/r/require.js"></script>
<script type="text/javascript">/*resourcemap*/
require.config({paths:{
  "r/bower_components/jquery/dist/jquery.min": "/server/r/bower_components/jquery/dist/jquery.min",
  "r/bower_components/underscore/underscore-min": "/server/r/bower_components/underscore/underscore-min",
  "r/static/js/hxz/hxz.valid": "/server/r/static/js/hxz/hxz.valid_12cc206",
  "r/static/js/hxz/hxz.rest": "/server/r/static/js/hxz/hxz.rest_07c8105",
  "r/bower_components/alertify/alertify.min": "/server/r/bower_components/alertify/alertify.min",
  "r/static/js/alertify-config": "/server/r/static/js/alertify-config_0cc8db2",
  "r/bower_components/bootstrap/dist/js/bootstrap.min": "/server/r/bower_components/bootstrap/dist/js/bootstrap.min",
  "r/bower_components/metisMenu/dist/metisMenu.min": "/server/r/bower_components/metisMenu/dist/metisMenu.min",
  "r/bower_components/select2/dist/js/select2": "/server/r/bower_components/select2/dist/js/select2",
  "r/static/js/hxz/hxz.ui": "/server/r/static/js/hxz/hxz.ui_0a7714d",
  "r/static/js/hxz/hxz": "/server/r/static/js/hxz/hxz_589b155",
  "r/bower_components/fex-webuploader/dist/webuploader": "/server/r/bower_components/fex-webuploader/dist/webuploader",
  "r/bower_components/moment/min/moment-with-zh-cn.min": "/server/r/bower_components/moment/min/moment-with-zh-cn.min",
  "r/bower_components/bootstrap-daterangepicker/daterangepicker": "/server/r/bower_components/bootstrap-daterangepicker/daterangepicker"
}});

  var filter = {};
  require(['r/bower_components/jquery/dist/jquery.min', 'r/static/js/hxz/hxz', "r/bower_components/underscore/underscore-min", "r/static/js/alertify-config", "r/bower_components/fex-webuploader/dist/webuploader", "r/bower_components/moment/min/moment-with-zh-cn.min", "r/bower_components/bootstrap-daterangepicker/daterangepicker"], function ($, hxz, _, alertify, WebUploader, moment) {


    var $startDate = $('#start-date');
    var $startDateInput = $('#start-date input');
    var $startTime = $('#start-time');

    function initPage() {
      // 初始化Web Uploader
      var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: "/server-release/bower_components/fex-webuploader/dist/Uploader.swf",
        // 文件接收服务端。
        server: 'http://image.huaxuezoo.com/upload',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: {
          id: '#cropper',
          multiple: false
        },
        // 只允许选择图片文件。
        accept: {
          title: 'Images',
          extensions: 'gif,jpg,jpeg,bmp,png',
          mimeTypes: 'image/*'
        },
        thumb: {
          width: 110,
          height: 110,
          // 图片质量，只有type为`image/jpeg`的时候才有效。
          quality: 100,
          // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
          allowMagnify: true,
          // 是否允许裁剪。
          crop: true,
          // 为空的话则保留原有图片格式。
          // 否则强制转换成指定的类型。
          type: 'image/jpeg'
        },
        compress: { }
      });

      var ajaxbg = $("#hxz-background,#hxz-progressBar");
      ajaxbg.hide();

      // 当有文件添加进来的时候
      uploader.on('fileQueued', function (file) {
        ajaxbg.show();
        uploader.makeThumb(file, function (error, src) {
          if (error) {
            $("#settlementImage").replaceWith('<span>不能预览</span>');
            return;
          }
        }, 350, 175);
      });
      uploader.on('beforeFileQueued', function (file) {
        uploader.reset();
        if (file.getSource().size > 310000) {
          alertify.error("上传图片大小不能大于300K", "danger");
          return false;
        }
      });

      // 文件上传成功，给item添加成功class, 用样式标记上传成功。
      uploader.on('uploadSuccess', function (file, response) {
        ajaxbg.hide();
        console.info(response);
        $("#image-url").val(response[0].url);
        $("#preview-image").attr("src", response[0].url);
      });
    }


    function getApplyDetail() {
      var data = {
        applyId: $("#applyId").val()
      };
      hxz.doGet({url: hxz.getUrlByfiterOption(hxz.RestApi.manageWithdrawalsApplyDetailList, data)}, function (data) {
        if (data.status == "0") {
          return alertify.log("系统错误");
        }
        var dataList = data.data;
        var tpl = _.template($('#tpl-apply-detail-list-item').html());
        $("#applyDetail-list-body").html("");
        for (var i = 0; i < dataList.length; i++) {
          var _data = dataList[i];
          _data.datetime = hxz.datetime;
          _data.episodeStatus = hxz.episodeStatus;

          _data.withdrawalsStatus2String = function (data) {
            data = Number(data);
            return hxz.withdrawalsStatus(data);
          };
          $("#applyDetail-list-body").append(tpl(_data));
        }
      });
    }

    function event() {
      $("#payMoney").keyup(function () {
        $("#profitMoney").val((parseFloat($("#settlementMoney").val()) - parseFloat($("#payMoney").val())).toFixed(2));
      });

      $("#settlement").on("click", function () {
        var data = {
          applyId: $("#applyId").val(),
          transferTime:$startTime.val(),
          payMoney: $("#payMoney").val(),
          organizerBank: $("#organizerBank").val(),
          organizerAccountName: $("#organizerAccountName").val(),
          organizerAccount: $("#organizerAccount").val(),
          certificateId: $("#certificateId").val(),
          certificateImg: $("#image-url").val(),
          note: $("#note").val(),
          profitMoney: $("#profitMoney").val()
        };
        if (!data.payMoney) {
          return alertify.log("请填写付款金额 如果没有请填写0，并且在备注中说明情况");
        }
        hxz.doPost({url: hxz.RestApi.manageSettlementAdd, data: data}, function (data) {
          if (data.status == 0) {
            return alertify.error(data.msg, "danger");
          } else {
            alertify.log(data.msg);
            setTimeout(function () {
              window.location.href = "/manage/manage-withdrawals-record-list";
            }, 1000);
          }
        });
      });

      moment.locale('zh-cn');
      var commDateConfig = {
        startDate: new Date(),
        locale: {
          format: 'YYYY年MM月DD日',
          separator: ' - ',
          applyLabel: '确定',
          cancelLabel: '关闭',
          weekLabel: 'W',
          customRangeLabel: 'Custom Range',
          daysOfWeek: moment.weekdaysMin(),
          monthNames: moment.monthsShort(),
          firstDay: moment.localeData().firstDayOfWeek()
        }
      };

      commDateConfig.singleDatePicker = true;

      $startDate.daterangepicker(commDateConfig, function (start, end, label) {
        $startDateInput.val(hxz.date(start));
        var sDate = new Date(start);
        $startTime.val(sDate.getTime());
      });
      var tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate());
      $startDateInput.val(hxz.date(tomorrow));
      $startTime.val(tomorrow.getTime());

    }

    initPage();
    getApplyDetail();
    event();
  });
</script>
</body>

</html>
